﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title></title>
</head>
<body>

<button id="test1">模拟遍历上一个节点</button>
<button id="test2">模拟遍历下一个节点</button>

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li class="third-item">list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>


<script type="text/javascript">


function sibling(cur, dir) {
  while ((cur = cur[dir]) && cur.nodeType !== 1) {}
  return cur;
}

function next(elem) {
  return sibling(elem, "nextSibling");
}

function prev(elem) {
  return sibling(elem, "previousSibling");
}


var thirdItem = document.querySelectorAll('.third-item')[0]



$("#test1").click(function(){
  var thirdItem = document.querySelectorAll('.third-item')[0]
  alert(prev(thirdItem).innerHTML)
})


$("#test2").click(function(){
  var thirdItem = document.querySelectorAll('.third-item')[0]
  alert(next(thirdItem).innerHTML)
})

</script> 

</body>
</html>









